<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script>
	// 如何做 promise 缓存？上一次调用函数的 promise 没有返回， 那么下一次调用函数依然返回上一个 promise

	const cacheMap = new Map()
	function cachePromise(url){
		if (cacheMap.has(url)){
			return cacheMap.get(url)
		}
		const promise = new Promise((resolve) => {
			setTimeout(() => {
				resolve(`data is ${url}`)
			},1000)
		})
		cacheMap.set(url,promise)
		return promise
	}
	// 测试用例1：基本调用
	cachePromise('/api/data1').then(console.log) // 1秒后输出 "data is /api/data1"
	
	// 测试用例2：并发调用（验证缓存效果）
	const p1 = cachePromise('/api/data2')
	const p2 = cachePromise('/api/data2')
	console.log(p1 === p2) // 应该输出 true
	
	// 测试用例3：完成后的再次调用
	cachePromise('/api/data3').then(() => {
		cachePromise('/api/data3').then(console.log) // 立即输出 "data is /api/data3"
	})
	
	// 测试用例4：不同url的独立缓存
	cachePromise('/api/a').then(console.log) // data is /api/a
	cachePromise('/api/b').then(console.log) // data is /api/b

</script>
</html>